@import "./common";

.layaflash{
    padding-top: 52px;
    padding-bottom: 30px;
    background-color: #8bc01f;
    .container{
        .row{
            display: flex;
            align-items: flex-start;
            .lf{
                color: #fff;
                .one{
                    display: flex;
                    align-items: center;
                    .one-box{
                        // height: 0;
                        position: relative;
                        background-color: #fff;
                        // font-size: 40px;
                        font-weight: bold;
                        display: inline-block;
                        width: 11%;
                        padding-top: 11%;
                        span{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            font-size: 48px;
                            color: #8bc01f;  
                        }
                    }
                    >span{
                        font-size: 44px;
                        margin-left: 12px;
                    }
                }
                
                p,button{
                    margin-left: 14px;
                }
                .p-da{
                    font-size: 24px;
                    margin: 18px 0 48px 14px;  
                }
                p:not(:first-of-type){
                    font-size: 14px;
                    margin-bottom: 26px;
                    color: #e5f0d6; 
                    // width: 430px;
                }
                p:last-of-type{
                    margin-bottom: 35px;
                }
                button{
                    // margin-top: 4px;
                    font-size: 14px;
                    font-weight: 600;
                    border: none;
                    outline: none;
                    // text-align: center;
                    // width: 22%;
                    // height: auto;
                    width: 100px;
                    height: 34px;
                    // line-height: 35px;
                    color: #98c743;
                }
            }

            .lf-img{
                .flash-img{
                    
                    // width: 82%;
                    img{
                        width: 75%;
                        margin-left: 20%;
                    }
                }
                
            }
        }
    }
}


.layaplayer{
    background-color: #3393df;
    .container{
        .row{
            display: flex;
            flex-wrap: wrap;
            padding-top: 74px;
            padding-bottom: 60px;
            // margin-top: 74px;
            // margin-bottom: 60px;
            .logo-rose{
                align-self: flex-start;
                padding-right: 0;
                .two{
                    display: flex;
                    align-items: center;
                    .two-box{
                        // height: 0;
                        position: relative;
                        background-color: #fff;
                        // font-size: 40px;
                        font-weight: bold;
                        display: inline-block;
                        width: 15%;
                        padding-top: 15%;
                        
                        span{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            font-size: 46px;
                            color: #3393df;  
                        }
                    }
                    >span{
                        color: #fff;
                        font-size: 44px;
                        margin-left: 12px;
                    }
                }
                .rose{
                    width: 85%;
                    margin-top: 5%;
                    margin-bottom: 60%;
                }
            }
  
            .player-text{
                padding-left: 0;
                align-self: center;
                
                p{
                    font-size: 24px;
                    color: #fff;
                    margin-bottom: 6px;
                }
                span{
                    display: block;
                    margin-bottom: 16px;
                    font-size: 14px;
                    line-height: 32px;
                    color: #fff;
                }
            }

            .logo-small{
                align-self: flex-end;
                .small{
                    width: 80%;
                } 
            }     
        }
    }   
}

.layafunction{
    .container{
        .row{
            padding-top: 52px;
            padding-bottom: 42px;
            .func-text{
                margin-bottom: 25px;
                .three{
                    display: flex;
                    align-items: center;
                    .three-box{
                        height: 0;
                        position: relative;
                        background-color: #3393df;
                        font-weight: bold;
                        display: inline-block;
                        width: 8%;
                        padding-top: 8%;
                        span{
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%,-50%);
                            font-size: 36px;
                            color: #fff;  
                        }
                    }
                    >span{
                        font-size: 40px;
                        color: #3393df;
                        margin-left: 8px;
                    }
                }
    
                .p-title{
                    font-size: 16px;
                    margin-top: 12px;
                    margin-bottom: 24px;
                    
                }
                p:not(:nth-of-type(1)){
                    font-size: 16px;
                    color: #3393df;
                    margin-bottom: 8px;
                }
                >span{
                    display: block;
                    font-size: 13px;
                    margin-bottom: 24px;
                    text-indent: 20px;
                }

                .func-img{
                    position: relative;
                    width: 30%;
                    padding-top: 30%;
                    margin: 0 auto;
                    img{
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-80%,-50%);
                        width: 80%;
                    }
                }
            }
        }
    }
}

.layafunc-bottom{
    background-color: #f7f7f7;
}

@media screen and (min-width: 992px) and (max-width: 1200px){
    .layaflash{
        .container{
            .row{
                .lf{
                    .one{
                        >span{
                            font-size: 38px;
                            margin-left: 8px;
                        }
                        .one-box{
                            width: 10%;
                            padding-top: 10%;
                            span{
                                font-size: 38px;
                            }
                        }
                    }
                    
                    .p-da{
                        font-size: 23px;
                        margin: 6px 0 32px 14px;
                    }
                    p:not(:first-of-type) {
                        margin-bottom: 20px;
                    }
                    button{
                        margin-top: 6px;
                    }
                }
                .lf-img{
                    margin-left: 1.33%;
                    .flash-img{
                        margin-left: 33px;
                        width: 100%;
                        img{
                            width: 84%;
                            margin-left: 0;
                        }
                    }
                }
                
            }
        }
    }
    
    .layaplayer{
        .container{
            .row{
                .logo-rose{
                    .two{
                        .two-box{
                            width: 13%;
                            padding-top: 13%;
                            span{
                                font-size: 38px;
                            }
                        }
                        >span{
                            margin-left: 8px;
                            font-size: 38px;
                        }
                    }
                }
                .player-text{
                    p{
                        margin-bottom: 0;
                    }
                    span{
                        margin-bottom: 18px;
                    }
                }
            }
        }
    }

    
}

@media screen and (min-width: 768px)and (max-width: 992px){
    .layaflash{
        .container{
            .row{
                .lf{
                    .one{
                        >span{
                            font-size: 32px;
                            margin-left: 6px;
                        }
                        .one-box{
                            width: 9%;
                            padding-top: 9%;
                            span{
                                font-size: 30px;
                            }
                        }
                    }
                    
                    .p-da{
                        font-size: 18px;
                        margin-top: 4px;
                        margin-bottom: 20px;
                    }
                    p:not(:first-of-type){
                        font-size: 12px;
                        margin-bottom: 10px;
                    }
                    p:last-of-type{
                        margin-bottom: 16px;
                    }
                    button{
                        font-size: 12px;
                        width: 87px;
                        height: 30px
                    }
                }
                .lf-img{
                    .flash-img{
                        img{
                            margin-left: 22px;
                            width: 80%;
                        }
                    }
                }
            }
        }
    }

    .layaplayer{
        .container{
            .row{
                .logo-rose{
                    .two{
                        >span{
                            font-size: 32px;
                            margin-left: 6px;
                        }
                        .two-box{
                            width: 14%;
                            padding-top: 14%;
                            span{
                                font-size: 30px;
                            }
                        }
                    }
                }

                .player-text{
                    p{
                        font-size: 18px;
                        margin-bottom: 0;
                    }
                    span{
                        font-size: 12px;
                        line-height: 22px;
                        margin-bottom: 10px;
                    }
                }
            }
        }
    }

    .layafunction{
        .container{
            .row{
                .func-text{
                    .three{
                        .three-box{
                            span{
                                font-size: 26px;
                            }
                        }
                        >span{
                            font-size: 30px;  
                        }
                    }
                    .p-title{
                        margin-top: 6px;
                        margin-bottom: 18px;
                    }
                    >span{
                        margin-bottom: 16px;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 768px){
    .layaflash{
        padding-top: 22px;
        padding-bottom: 26px;
        .container{
            .row{
                .lf{
                    .one{
                        justify-content: center;
                        >span{
                            font-size: 24px;
                            margin-left: 5px;
                        }
                        .one-box{
                            width: 5%;
                            padding-top: 5%;
                            span{
                                font-size: 22px;
                            }
                        }
                    }
                    // p{
                    //     text-align: center;
                    // }
                    .p-da{
                        margin: 6px 0 6px 14px;
                        font-size: 14px;
                    }
                    p:not(:first-of-type){
                        margin-bottom: 8px;
                        font-size: 12px;
                    }
                    p:last-of-type{
                        margin-bottom: 8px;
                    }
                    button{
                        font-size: 12px;
                        width: 60px;
                        height: 24px;
                        margin-bottom: 0;
                        float: right;
                    }
                }
                .lf-img{
                    .flash-img{
                        img{
                            width: 95%;
                        }
                    }
                }
            }
        }
    }

    .layaplayer{
        .container{
            .row{
                padding-top: 22px;
                padding-bottom: 30px;
                .logo-rose{
                    padding-right: 15px;
                    .two{
                        justify-content: center;
                        >span{
                            font-size: 23px;
                            margin-left: 5px;
                        }
                        .two-box{
                            width: 5%;
                            padding-top: 5%;
                            span{
                                font-size: 22px;
                            }
                        }
                    }
                }
                .player-text{
                    padding-left: 29px;
                    p{
                        font-size: 14px;
                        margin-bottom: 0;
                        margin-top: 6px;
                    }
                    span{
                        font-size: 12px;
                        line-height: 22px;
                    }
                }
            }
        }
    }

    .layafunction{
        .container{
            .row{
                padding-bottom: 0;
                .func-text{
                    >span{
                        font-size: 12px;
                        margin-bottom: 8px;
                        text-indent: 15px;
                    }
                    .three{
                        .three-box{
                            width: 4%;
                            padding-top: 4%;
                            span{
                                font-size: 22px;
                            }
                        }
                        >span{
                            font-size: 20px;
                            margin-left: 4px;
                        }
                    }
                    .p-title{
                        font-size: 13px;
                        margin-top: 4px;
                        margin-bottom: 12px;
                    }
                    p:not(:nth-of-type(1)) {
                        font-size: 13px;
                        margin-bottom: 2px;
                    }
                    .func-img{
                        width: 25%;
                        padding-top: 15%;
                        img{
                            width: 45%;
                        }
                    }
                }
            }
        }
    }
}
        
            